<template>
  <div class="header_margin-top">
    <Header/>
    <div class="clearfix con-width-1200">
      <a href="javascript:void()" @click="$router.go(-1)" class="fxr return">返回</a>
      <div class="clear h10"></div>
      <div class="showHtml" v-html="html.content">
      </div>
      <div class="r-top rad5" @click="$router.go(-1)">
        <i class="iconfont icon-fanhuidingbu"></i>
        <p>返回</p>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
import Header from './Header.vue'
import Footer from "./Footer.vue";
import _http from "../httpService";

export default {
  name: "Detail",
  props: {
    msg: String
  },
  components: {
    Header,
    Footer
  },
  data() {
    return {
      html: "<h1>文章正在读取中...</h1>"
    };
  },
  methods: {},
  created() {
    console.log(this.$route.params.id);
    _http
      .get("/content/selectDetailByContentId?id=" + this.$route.params.id)
      .then(response => {
        if (response.data == "") this.html = "<h1>文章正在读取中...</h1>";
        else this.html = response.data;
      })
      .catch(error => console.log(error))
      .finally(() => (this.loading = false));
  }
};
</script>

<style>
a.return {
  font: normal 12px/30px "Microsoft YaHei";
  color: #a15c46;
}
.r-top {
  color: #753f37;
  margin-left: 580px;
  background: #fcf8ef;
  padding: 10px;
  margin: 40px 0px 0px 20px;
}
a.return:hover {
  color: #753f37;
}
.showHtml {
  border: 1px solid #ebcec1;
  background: #fffefc;
  padding: 30px 22px;
  text-align: left;
}
.showHtml p {
  text-indent: 2em;
  font: normal 14px/30px "Microsoft YaHei";
  color: #555;
}
.showHtml h1 {
  font: normal 20px/90px "Microsoft YaHei";
  color: #a15c46;
  text-align: center;
}
</style>
